<template>
  <div>
    <el-main>
      <el-table :data="tableData" border>
        <el-table-column type="index" width="100" align="center" label="序号">
          <template scope="scope">
            <span>{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="username" label="日期">
        </el-table-column>
        <el-table-column prop="password" label="姓名">
        </el-table-column>
        <el-table-column prop="name" label="">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="avatar" label="头像">
        </el-table-column>
        <el-table-column  label="操作">
        </el-table-column>
      </el-table>
    </el-main>
  </div>
</template>

<script>
import {selectAllApi} from '@/Api/userApi'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Main",
  data() {
    return {
      tableData: []
    }
  },
  async mounted() {
    const {data}  = await selectAllApi('/user/select')
    this.tableData = data
    // const res = await axios.get('http://localhost:9090/user/select')
    // this.tableData = res.data.data
  }
}
</script>

<style scoped lang="less">
.el-main {
  color: #333;
  padding: 0;
  .el-table{
    padding: 0 20px;
  }
}

</style>
